<template>
  <view class="form-card">
    <text class="form-label" :class="{ required }">{{ label }}</text>
	<view class="row" v-if="haveExample">
	    <!-- 左侧文本 -->
	    <text class="prefix">示例:</text>
	
	    <!-- 右侧图片列表：同一行展示，图片点击可预览 -->
	    <view class="images" >
	      <view v-for="(src, index) in images" :key="index" class="image-wrap" @tap="previewImage(index)">
	        <image :src="src" class="thumb" mode="aspectFill" />
	      </view>
	    </view>
	  </view>
	  
    <view class="radio-group">
      <view 
        class="radio-item" 
        :class="{ active: isActive(option.value) }" 
        v-for="option in options" 
        :key="option.value"
        @click="handleSelect(option.value)"
      >
        <view class="radio-circle"></view>
        <text v-if="option.type==='text'">{{ option.label }}</text>
		<image v-if="option.type==='image'" style="width: 20px;height: 20px;" :src="option.label" 
		mode="aspectFill" @click.stop="openLargeImage(option.label)"></image>
		  
      </view>
	  <div v-if="showLargeImage" class="image-modal">
	      <div class="modal-content">
	        <image :src="currentImage" mode="widthFix" style="max-width: 100%;" />
	        <button @click="showLargeImage = false">关闭</button>
	      </div>
	    </div>
    </view>
    <view class="divider" v-if="showDivider"></view>
  </view>
</template>

<script>
export default {
	data() {
	  return {
		showLargeImage: false,
		currentImage: ''
	  };
	},
  props: {
    label: {
      type: String,
      required: true
    },
    modelValue: {
      type: [String, Number, Boolean, null],
      required: true
    },
	images:{
		type:[String,null]
	},
    options: {
      type: Array,
      required: true
    },
    required: {
      type: Boolean,
      default: false
    },
	haveExample:{
		type:Boolean,
		default:false
	},
    showDivider: {
      type: Boolean,
      default: true
    }
  },
  emits: ['update:modelValue'],
  methods: {
	previewImage(index) {
		const urls = this.images;
		const current = urls[index];
		uni.previewImage({
		  current,
		  urls
		}).catch(() => {
		  // 兼容处理：如果在某些平台不支持直接调用，可以回退到简单提示
		  uni.showToast({ title: '预览不可用', icon: 'none' });
		});
	  },
    isActive(value) {
      // 处理布尔值和字符串值的比较
      return this.modelValue === value
	  console.log(active)
    },
    handleSelect(value) {
      this.$emit('update:modelValue', value)
    },
	openLargeImage(url) {
      this.currentImage = url;
      this.showLargeImage = true;
    }
  }
}
</script>


<style scoped>
/* 保留原有的样式 */
.form-card {
  margin-bottom: 20rpx;
  background-color: #fff;
  padding: 20rpx;
  border-radius: 10rpx;
}
.form-label {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
}
.form-label.required::before {
  content: "*";
  color: red;
  margin-right: 8rpx;
}
.radio-group {
  display: flex;
  margin-top: 10rpx;
}
.radio-item {
  display: flex;
  align-items: center;
  margin-right: 40rpx;
  color: #666;
}
.radio-circle {
  width: 36rpx;
  height: 36rpx;
  border-radius: 50%;
  border: 2rpx solid #ddd;
  margin-right: 10rpx;
  position: relative;
}
.radio-item.active .radio-circle {
  border-color: #007aff;
}
.radio-item.active .radio-circle::after {
  content: "";
  position: absolute;
  width: 20rpx;
  height: 20rpx;
  background-color: #007aff;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.radio-item.active {
  color: #007aff;
}
.image-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  
}
.modal-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
}

.row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  overflow: hidden;
  white-space: nowrap;
}

.prefix {
  font-size: 14px;
  color: #333;
  margin-right: 12px;
  /* 根据需要调整左边文本的宽度或样式 */
}

.images {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  overflow: hidden;
}

.image-wrap {
  width: 20px;
  height: 20px;
  margin-right: 6px; /* 间距，可根据需要调整 */
}

.thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px;
}
</style>
